<script setup>
import { onMounted, reactive, ref } from 'vue';

const awesome =ref(true)

const ok = ref(true)


const parentMessage = ref('Parent')
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])



onMounted(() => {
  const styleTag = document.createElement('style')
  styleTag.textContent = `
    .hover-style {
      color: blue;
      transition: all 0.3s ease;
    }
    .hover-style:hover {
      font-size: 24px;
      color: red;
    }
  `
  document.head.appendChild(styleTag)

  items.value.forEach((item) => {
    const p = document.createElement('p')
    p.textContent = item.message
    p.className = 'hover-style'
    document.getElementById('p-content').appendChild(p)
  })
})


const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})






</script>
<template>
    <h1>VueRender</h1>
    
    <span v-for="n in 10">{{ n }},</span>

    <h3>v-for to object-value-list (value,key,index) in myobject</h3>
    <li v-for="(value, key, index) in myObject">
        {{ index }}. {{ key }}: {{ value }}
    </li>

    <h3>v-for to object-value-list (value,key) in myobject</h3>
    <li v-for="(value, key) in myObject">
        {{ key }}: {{ value }}
    </li>

    <h3>v-for to object-value-list</h3>
    <ul>
        <li v-for="value in myObject">
            {{ value }}
        </li>
    </ul>


    <div id="p-content">
        <h3>createElement to document</h3>
    </div>

    <li v-for="(item,index) of items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>


    <button @click="awesome = !awesome">Toggle</button>
    <h3 v-if="awesome">Vue is awesome!(v-if)</h3> 
    <h3 v-else>On no 😢(v-if)</h3>

    <h3 v-show="awesome">Vue is awesome!(v-show)</h3>
    <h3 v-show="!awesome">On no 😢(v-show)</h3>

    <button @click="ok = !ok">ChangeOkValue</button>
    <template v-if="ok">
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template>



</template>
<style scoped>
</style>